<template>
      <div class="admin-home-area flex of_hidden">
            <div class="left-side-box flex flex-column">
                  <div class="admin-logo-box">
                        <img src="@/assets/logo-en-write.png" alt="">
                  </div>
                  <div class="main-menu-box" style="overflow-y: scroll;height: calc(100vh - 100px); scrollbar-width: 0;">
                        <MainMenu v-model:menuCollapse="data.menuCollapse"></MainMenu>
                  </div>
                  <div class="setup-box flex ali-center jus-center">
                        设置模块
                  </div>
            </div>
            <div class="flex-1 router-scroll">
                  <HomeHeader @getHeadMenuCollapse="getHeadMenuCollapse"></HomeHeader>
                  <div class="pd">
                        <router-view />
                  </div>
                  <p class="admin-copyright-box ft-center" v-html="adminCopyright"></p>
            </div>
      </div>
</template>

<script lang="ts" setup>
import { adminCopyright } from '@/config/assets.config'

import HomeHeader from '@/components/admin/home/homeHeader.vue'
import MainMenu from '@/components/admin/home/mainMenu.vue'
import { reactive } from 'vue';

let data = reactive({
      menuCollapse: false
})

let getHeadMenuCollapse = (e: any) => {
      data.menuCollapse = e
}

</script>

<style scoped>
.left-side-box {
      background-color: #001529;
}
.admin-home-area {
      color: #000;
      width: 100%;
      height: 100vh;
}

.admin-logo-box {
      width: 60px;
      height: 50px;
      margin: 0 auto;
}

.setup-box {
      height: 50px;
}

.admin-logo-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
}

.main-menu-box::-webkit-scrollbar {
      width: 0;
}

.setup-box {
      border-top: 1px solid rgba(70, 70, 70, .7);
      color: #fff;
}

.router-scroll {
      overflow-x: hidden;
      overflow-y: scroll;
}

.admin-copyright-box {
      font-size: 15px;
      margin-bottom: 20px;
      margin-top: 20px;
      color: rgb(92, 92, 92);
}
</style>